<template>
  <div class="bg">
    <div class="search-success">
      <section class="logo">
        <img src="@/assets/img/pc/logo.png" alt="" width="200px" />
      </section>
      <section class="result">
        <svg-icon iconClass="success" className="result-icon"></svg-icon>
      </section>
      <section class="result-wrapper">
        <p>您所查询的</p>
        <p style="margin-bottom: 50px">{{ name }}</p>
        <p>经验证为</p>
        <p v-if="type === 'AOPT'">科医人AOPT超光子认证机构</p>
        <p v-else-if="type === 'M22王者之冠'">M22王者之冠认证机构</p>
        <p v-else-if="type === 'M22王者之尊'">M22王者之尊认证机构</p>
      </section>
      <section class="btn">
        <div class="back" @click="$router.push({ name: 'HospitalVerify' })">
          返回查询页面
        </div>
      </section>
      <section class="suggest">
        <div class="line">
          <p>验证未成功的医疗机构科医人公司无法保证其使用原厂正品设备</p>
          <p>为保障您的合法权益请至已认证的专业医疗机构进行治疗</p>
        </div>
        <div class="">
          <p>科医人客服热线</p>
          <p>400-810-5811/800-990-5811</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "searchSuccess",
  computed: {
    ...mapGetters(["name", "type"]),
  },
  mounted() {
    console.log(this.type)
    this.$nextTick(() => {
      if (typeof this.name == "undefined") {
        this.$message.error({
          message: "没有医院名称,请重新输入",
          onClose: () => {
            this.$router.push({ name: "HospitalVerify" });
          },
        });
      }
    });
  },
};
</script>

<style scoped>
.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #4849bf;
}
.search-success {
  position: absolute;
  width: 100%;
  min-width: 1668px;
  height: 100%;
  min-height: 1000px;
  padding: 100px 120px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  background: url(../../../assets/img/pc/header.png) no-repeat center;
  padding-bottom: 2.5rem;
  background-size: contain;
  box-sizing: border-box;
  text-align: left;
  color: #fff;
}
.logo {
  margin-top: 2rem;
}
.result {
  margin-top: 4rem;
}
.result-icon {
  margin-top: 2rem;
  width: 7rem;
  height: 7rem;
}
.result-text {
  font-size: 2.2rem;
  font-weight: 500;
}
.result-wrapper {
  width: 100%;
  font-size: 2rem;
  margin-top: 2rem;
  line-height: 2.4rem;
  font-weight: 400;
}
.tip {
  margin-top: 2rem;
  line-height: 1.8rem;
  font-size: 1rem;
  font-weight: 400;
}
.btn {
  text-align: left;
  width: 100%;
  margin-top: 50px;
}
.btn .back {
  width: 150px;
  line-height: 3rem;
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
}
.suggest {
  width: 100%;
  display: flex;
  line-height: 24px;
  font-size: 14px;
  margin-top: 50px;
}
.suggest .line {
  border-right: 1px solid #fff;
  padding-right: 30px;
  margin-right: 30px;
}
</style>
